//轮播图接口请求
//1.引入react 因为轮播图接口只是展示数据,所以写出函数组件,不需要写出类组件
import React from 'react'

//2.引入ant框架
import { Button, Space, Swiper, Toast } from 'antd-mobile'
//3.引入环境变量展示图片
import {$pre} from '../../../../http/http'

//3.引入本身的less样式
import './Banner.less'


//4.向外暴露Banner组件
export default function Banner(props) {
    let { banner } = props
    return (
        <div>
            <h2>轮播图</h2>
            <Swiper autoplay loop={true} style={{ '--height': '3.8rem' }}>
                {banner.map(item => {
                    return (
                        <Swiper.Item key={item.id}>
                            <img src={$pre+item.img} alt="" style={{'height':'100%','width':'100%'}}/>
                        </Swiper.Item>
                    )
                })}
            </Swiper>
        </div>
    )
}
